<template>
  <div v-if="visible" class="anomaly-detail-dialog-overlay" @click="handleOverlayClick">
    <div class="anomaly-detail-dialog" @click.stop>
      <div class="dialog-header">
        <div class="dialog-title-section">
          <img :src="getBrandLogo(batch.brand)" :alt="batch.brand" class="batch-logo" />
          <h3 class="dialog-title">{{ batch.name }} - 异常情况详情</h3>
        </div>
        <button class="close-btn" @click="$emit('close')">
          <XIcon :size="20" />
        </button>
      </div>

      <div class="dialog-content">
        <!-- 命名异常 -->
        <div v-if="namingAnomalies.length > 0" class="anomaly-section">
          <h4 class="section-title">
            <ExclamationTriangleIcon :size="18" color="#d48806" class="section-icon" />
            命名异常 ({{ namingAnomalies.length }})
          </h4>
          <div class="anomaly-grid">
            <div v-for="item in namingAnomalies" :key="item.id" class="anomaly-card">
              <div class="card-preview">
                <img
                  v-if="item.imageUrl"
                  :src="item.imageUrl"
                  :alt="item.fileName"
                  class="preview-image"
                />
                <div v-else class="no-image">无图片</div>
              </div>
              <div class="card-info">
                <div class="file-name">{{ item.fileName }}</div>
                <div class="anomaly-reason">{{ item.reason }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 仅图片 -->
        <div v-if="imageOnlyItems.length > 0" class="anomaly-section">
          <h4 class="section-title">
            <ImageIcon :size="18" color="#d48806" class="section-icon" />
            仅图片 ({{ imageOnlyItems.length }})
          </h4>
          <div class="anomaly-grid">
            <div v-for="item in imageOnlyItems" :key="item.id" class="anomaly-card">
              <div class="card-preview">
                <img
                  v-if="item.imageUrl"
                  :src="item.imageUrl"
                  :alt="item.fileName"
                  class="preview-image"
                />
                <div v-else class="no-image">无图片</div>
              </div>
              <div class="card-info">
                <div class="file-name">{{ item.fileName }}</div>
                <div class="anomaly-reason">缺少商品信息</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 仅信息 -->
        <div v-if="infoOnlyItems.length > 0" class="anomaly-section">
          <h4 class="section-title">
            <DocumentIcon :size="18" color="#d48806" class="section-icon" />
            仅信息 ({{ infoOnlyItems.length }})
          </h4>
          <div class="anomaly-grid">
            <div v-for="item in infoOnlyItems" :key="item.id" class="anomaly-card">
              <div class="card-preview">
                <img
                  v-if="item.imageUrl"
                  :src="item.imageUrl"
                  :alt="item.fileName"
                  class="preview-image"
                />
                <div v-else class="no-image">无图片</div>
              </div>
              <div class="card-info">
                <div class="file-name">{{ item.fileName }}</div>
                <div class="anomaly-reason">缺少图片文件</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div
          v-if="
            namingAnomalies.length === 0 &&
            imageOnlyItems.length === 0 &&
            infoOnlyItems.length === 0
          "
          class="empty-state"
        >
          <div class="empty-icon">
            <DocumentIcon :size="48" color="#9ca3af" />
          </div>
          <div class="empty-text">暂无异常情况</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { XIcon, ExclamationTriangleIcon, ImageIcon, DocumentIcon } from './icons'
import { generateLogoPlaceholder } from '../utils/logoPlaceholder'

export default {
  name: 'AnomalyDetailDialog',
  components: {
    XIcon,
    ExclamationTriangleIcon,
    ImageIcon,
    DocumentIcon,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    batchId: {
      type: [String, Number],
      default: '',
    },
    batch: {
      type: Object,
      default: () => ({}),
    },
    brands: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['close'],
  setup(props, { emit }) {
    // 获取品牌LOGO
    const getBrandLogo = brandName => {
      const brand = props.brands.find(b => b.name === brandName)
      return brand && brand.logo ? brand.logo : generateLogoPlaceholder(brandName)
    }

    // 从batch数据中获取异常文件列表
    const namingAnomalies = computed(() => {
      return props.batch.anomalyFiles?.naming || []
    })

    const imageOnlyItems = computed(() => {
      return props.batch.anomalyFiles?.emptyInfo || []
    })

    const infoOnlyItems = computed(() => {
      return props.batch.anomalyFiles?.emptyImage || []
    })

    const handleOverlayClick = () => {
      // 点击遮罩层关闭弹窗
      emit('close')
    }

    return {
      namingAnomalies,
      imageOnlyItems,
      infoOnlyItems,
      handleOverlayClick,
      getBrandLogo,
    }
  },
}
</script>

<style scoped>
.anomaly-detail-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.anomaly-detail-dialog {
  background: #fffbf0;
  border: 2px solid #faad14;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(250, 173, 20, 0.2);
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #faad14;
  background: linear-gradient(135deg, #fff7e6 0%, #fffbf0 100%);
}

.dialog-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.batch-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #ffd666;
}

.dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #d48806;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #6b7280;
  transition: all 0.2s;
}

.close-btn:hover {
  background-color: #fff2e8;
  color: #d48806;
}

.dialog-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.anomaly-section {
  margin-bottom: 32px;
}

.anomaly-section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #d48806;
}

.section-icon {
  flex-shrink: 0;
}

.anomaly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  padding: 12px;
}

.anomaly-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ffd666;
  border-radius: 8px;
  background-color: #fffbf0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.anomaly-card:hover {
  border-color: #faad14;
  box-shadow: 0 8px 25px rgba(250, 173, 20, 0.25);
  transform: translateY(-8px) scale(1.15);
  z-index: 10;
}

.card-preview {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  color: #9ca3af;
  font-size: 12px;
}

.card-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-name {
  font-weight: 500;
  color: #1f2937;
  font-size: 13px;
  word-break: break-all;
  line-height: 1.3;
}

.anomaly-reason {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.empty-text {
  font-size: 16px;
}

@media (max-width: 768px) {
  .anomaly-detail-dialog {
    width: 95%;
    margin: 20px;
  }

  .dialog-header {
    padding: 16px 20px;
  }

  .dialog-content {
    padding: 20px;
  }

  .anomaly-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    padding: 8px;
  }

  .anomaly-card:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 20px rgba(250, 173, 20, 0.25);
  }

  .card-preview {
    height: 100px;
  }

  .card-info {
    padding: 8px;
  }

  .file-name {
    font-size: 12px;
  }

  .anomaly-reason {
    font-size: 11px;
  }
}
</style>
